:root {
	--color-background: white;
	--color-secondary-background: hsl(217, 40%, 96%);
	--color-on-background: hsl(90, 8%, 10%);
	--color-primary: hsl(205, 85%, 40%);
	--color-primary-hightlight: hsl(205, 85%, 35%);
	--color-on-primary: white;
	--color-red: rgb(232, 17, 35);
	--color-background-10-percent: rgba(0, 0, 0, 0.1);

	font-family:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
		'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.5;
	background-color: var(--color-background);
	color: var(--color-on-background);
}

*,
::before,
::after {
	box-sizing: border-box;
}

button,
input,
textarea,
select {
	font: inherit;
}

body {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 0;
	min-height: 100vh;
}

.title {
	margin: 0;
	padding: 1em;
	text-align: center;
}
